<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  div{
    margin: 20px 0px;
    line-height: 40px;
    height: 40px;
  }
  span{
    margin: 20px 0px;
    line-height: 40px;
    height: 40px;
    color: aliceblue;
    padding: 8px;
  }
  .green{
    background-color: green;
  }
  .red {
    background-color: red;
  }
  .blue{
    background-color: blue;
  }
</style>
<body>
    <!-- 
    1、前追加子元素  =>prepend(),prependTo
    2、后追加子元素  =>apend(),appendTo
    3、前追加同级元素=>before()
    4、后追加同级元素=>after()
    -->
    <h3>prepend的前追加子元素</h3>
    <h3>prependTo的前追加内容</h3>
    <h3>append的后追加子元素</h3>
    <h3>appendTo的后追加内容</h3>
    <span class="red">男神</span>
    <span class="blue">偶像</span>
    <div class="green">
      <span>小鲜肉</span>
    </div>
    <button id="mybutton" onclick="add()">添加元素</button>
</body>
<script src="../jQuery/jquery-3.7.1.js"></script>
<script>
    var p="<p>这是一个p标签</p>"
    console.log($(p));
    var newspan="<span>小奶狗</span>"
    $('.green').prepend(newspan)
    var newspan="<span>小狼狗</span>"
    $(newspan).prependTo('.green')
    
    var mybtn=$('#mybutton');

    function add(){
        var newspan="<span>小奶狗</span>";
        $('.green').prepend(newspan);
    }
    
    $('.green').append($('.red'))



</script>
</html>